import React, { useState, useRef, useEffect } from 'react'
//导入第三方包
import { random } from 'lodash'
//导入css文件
import './Child.css'
//props为父组件传递给子组件中的属性值，props是一个对象,props这个形式参数名称自定义
export default function Child(props) {

    //调用useRef方法
    let user = useRef(); //{current: undefined}
    let pass = useRef(); //{current: undefined}
    let box = useRef();

    //接收来自于App组件中传递的属性数据
    // console.log(props); //{username: '大沫沫', userage: 18, usersex: true}

    //解构
    let { username, userage, usersex } = props;


    //需求：是想要在函数式组件中声明状态数据 ,在函数式组件中是通过React封装的一些Hook函数来辅助实现
    // console.log(useState()); //[undefined, ƒ]
    //如果想要定义状态数据，则只需要在useState函数中传递参数即可,基本上可以传递string、number、object、boolean、array
    let [schoolName, setSchoolName] = useState('尚硅谷')

    let [count, setCount] = useState(100);

    let [isLogin, setisLogin] = useState(true);

    let [color, setColor] = useState({
        bgcolor: 'rgb(0,255,0)'
    });


    //调用useEffect钩子函数
    //参数1：函数
    //参数2：数组 这个参数是可选参数

    //情况1：表示componentDidMount以及componentDidUpdate两个钩子函数的效果
    // useEffect(() => {
    //     console.log('我是生命周期钩子函数...');
    // })

    //情况2：表示componentDidMount
    //经常可以做四件事：ajax请求、定时器、订阅频道、DOM相关操作
    /* useEffect(() => {
        console.log('我是生命周期钩子函数...');
    }, []) */

    //情况3：当如果想要哪一些状态数据发生变化自动调用componentDidUpdate的话，则在这个第二个参数数组中添加状态变量名
    /* useEffect(() => {
        console.log('我是生命周期钩子函数...');
    }, [schoolName, count]) */

    //情况4：如果想要表示组件将要被卸载componentWillUnMount,需要在useEffect函数中添加一个返回值，且返回是一个函数
    //经常可以做两件事：清除定时器、取消订阅
    // useEffect(() => {
    //     return () => {
    //         console.log('我是生命周期钩子函数...');
    //     }
    // }, [])

    //情况5：注意事项
    //useEffect第一个参数的函数必须是同步函数，不能添加async，如果想要实现ajax异步请求，需要在这个函数的里面单独在声明async函数
    useEffect(() => {
        async function main() {
            let result = await 100;
            console.log(result);
        }
        //调用函数
        main();
    }, [])



    /* let arr = [1, 2, 3, 4]
    let [a, b, c, d] = arr; */

    //声明事件函数
    // function changeSchoolName() { }

    let changeSchoolName = () => {
        setSchoolName('百度');
    }

    //高阶函数
    let addNum = n => {
        return () => {
            //调用
            setCount(count + n);
        }
    }

    let changeIsLogin = () => {
        setisLogin(!isLogin);
    }

    let changeColor = () => {
        setColor({
            bgcolor: `rgb(${random(0, 255)},${random(0, 255)},${random(0, 255)})`
        })
    }

    //将数据定义在数组中
    let arr = [
        './img/t1.png',
        './img/t2.png',
        './img/t3.png',
        './img/t4.png'
    ]

    let [num, setNum] = useState(0);

    let leftArrow = () => {
        //让num的值自减1
        num = num - 1;
        //边界判断
        if (num < 0) {
            num = arr.length - 1;
        }
        console.log(num)
        //重置状态值
        setNum(num);
    }
    let rightArrow = () => {
        //让num的值自增1
        num = num + 1;
        //边界判断
        if (num === arr.length) {
            num = 0;
        }
        console.log(num)
        //重置状态值
        setNum(num);
    }

    let [n, setN] = useState(0);
    //定义数组
    let arr1 = [
        {
            img: './goods/1.jpg'
        },
        {
            img: './goods/2.jpg'
        },
        {
            img: './goods/3.jpg'
        },
        {
            img: './goods/4.jpg'
        },
        {
            img: './goods/5.jpg'
        }
    ]

    let changeImg = c => {
        return () => {
            //根据用户点击每一个div的下标来直接更改状态数据的下标
            setN(c);
        }
    }

    let showForm = () => {
        //获取账号和密码的文本框的值
        console.log(user.current.value)
        console.log(pass.current.value)

        //获取div元素
        console.dir(box.current)
        console.log(box.current.nodeName);
    }

    return (
        <div>
            <p>学校名称：{schoolName}</p>
            <button onClick={changeSchoolName}>更改学校名称</button>
            <hr />
            <p>计数器：{count}</p>
            <button onClick={addNum(10)}>+10</button>
            <button onClick={addNum(15)}>+15</button>
            <button onClick={addNum(20)}>+20</button>
            <hr />
            <div>当前用户登录状态：{isLogin ? <span>恭喜您，成功登录</span> : <p><button>登录</button><button>注册</button></p>}</div>
            <button onClick={changeIsLogin}>更新登录状态</button>
            <hr />
            <div style={{ width: 100, height: 100, background: color.bgcolor }} onClick={changeColor}>尚硅谷</div>
            <hr />
            {/* 可视区域 */}
            <div className='slider'>
                <div className='warpper' style={{ left: -600 * num + 'px' }}>
                    {
                        arr.map((item, index) => {
                            return <img src={item} alt="" key={index} />
                        })
                    }

                </div>
                <div className="Arrow left" onClick={leftArrow}>&lt;</div>
                <div className="Arrow right" onClick={rightArrow}>&gt;</div>
            </div>
            <hr />
            <div className='goods-image'>
                <div className="big-image">
                    <img src={arr1[n].img} alt="" />
                </div>
                <div className="small-images">
                    {
                        arr1.map((item, index) => {
                            return (
                                <div className="item" key={index} onClick={changeImg(index)}>
                                    <img className={index === n ? 'active' : ''} src={item.img} alt='' />
                                </div>
                            )
                        })
                    }
                </div>
            </div>
            <hr />
            <h3>接收来自于App组件中传递的属性数据</h3>
            <span>姓名：{username}</span>
            <span>&nbsp;年龄：{userage}</span>
            <span>&nbsp;性别：{usersex ? '女' : '男'}</span>
            <hr />
            <p>账号:<input type="text" ref={user} /></p>
            <p>密码:<input type="password" ref={pass} /></p>
            <p><button onClick={showForm}>获取表单元素值</button></p>
            <div style={{ width: 200, height: 200, border: '1px dashed red' }} ref={box}></div>
        </div>
    )
}
